<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 事件
     事件监听：绑定事件
     1.html属性处理:需要在事件前+on,值就是事件处理程序（可以直接处理，也可以用函数调用脚本）
     2.DOM0事件处理：对象的属性
     3.DOM2事件处理：调用方法addEventListener()和removeEventListener()
     -->
    <button class="btn1" onclick="show()">点我一下</button>
    <button class="btn2" >登录</button>
    <button class="btn3">点击</button>
    <button class="btn4">随机点名</button>
    <h3 id=" font"></h3>
    <script>
       let show = function(){
            alert('感谢')
        };
        const button1 = document.querySelector('.btn2');
        button1.onclick = function(){
            alert('欢迎登陆'+this.className);         
        }
        const button2 = document.querySelector('.btn3');
        button2.addEventListener('click',function(){ //匿名函数 
            alert('hello world');
        },false);
        //随机点名
        let Name = ['a','b','c','d','e','f'];
        const clickName = document.querySelector('.btn4');
        clickName.addEventListener('click',function showName(){
            const h3Name = document.querySelector('#font');
           // let num = Math.floor(Math.random()*Name.length);
           let num = Math.floor(Math.random()*61);
            h3Name.innerHTML = num;
        },false);
        //获取随即名字并显示到网页中
        
    </script>
</body>
<script>

</script>
</html>